<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: lynn
 * @Date: 2020-10-20 19:26:50
 * @LastEditors: lynn
 * @LastEditTime: 2020-10-22 16:32:43
-->
<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      top="4%"
      width="35%"
      center
    >
      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="60px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="ruleForm.nickname" />
        </el-form-item>
        <el-form-item label="电话" prop="mobail">
          <el-input v-model="ruleForm.mobail" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="ruleForm.sex" />
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-input v-model="ruleForm.birthday" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div>
      <h2>用户管理</h2>
      <el-button type="text" @click="centerDialogVisible = true">添加用户</el-button>
    </div>

    <el-table
      :data="newlist"
      style="width: 100%"
    >
      <el-table-column
        prop="username"
        label="用户"
        width="180"
      />
      <el-table-column
        prop="mobaile"
        label="电话"
        width="180"
      />
      <el-table-column
        prop="sex"
        label="性别"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pagenum"
      :page-sizes="[1, 3, 5, 7]"
      :page-size.sync="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    const nicknameEvent = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('不能为空'))
      }
      callback()
    }
    const mobailEvent = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能为空'))
        return
      } else if (!/^1[35789]\d{9}$/.test(value)) {
        callback(new Error('请输入正确的手机号'))
        return
      } else {
        callback()
      }
    }
    const emailEvent = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能为空'))
        return
      } else if (!/^\w+@(163|qq|192)\.(com|cnt|cn)$/.test(value)) {
        callback(new Error('请输入正确邮箱'))
        return
      } else {
        callback()
      }
    }
    return {
      centerDialogVisible: false,
      pagenum:1,
      pagesize:3,
      newlist:[],
      ruleForm: {
        username: '',
        nickname: '',
        mobail: '',
        email: '',
        sex: '',
        birthday: ''
      },
      rules: {
        nickname: [
          {
            validator: nicknameEvent,
            trigger: 'blur'
          }
        ],
        mobail: [
          {
            validator: mobailEvent,
            trigger: 'blur'
          }
        ],
        email: [
          {
            validator: emailEvent,
            trigger: 'blur'
          }
        ]
      },
      tableData: [{
        username: '小红',
        mobaile: '15718261478',
        sex: '男'
      }, {
        username: '小绿',
        mobaile: '17614891563',
        sex: '女'
      }, {
        username: '小黄',
        mobaile: '15871598158',
        sex: '男'
      }, {
        username: '小紫',
        mobaile: '17819871456',
        sex: '男'
      },{
        username: '小紫',
        mobaile: '17819871456',
        sex: '男'
      },{
        username: '小紫',
        mobaile: '17819871456',
        sex: '男'
      },{
        username: '小紫',
        mobaile: '17819871456',
        sex: '男'
      },{
        username: '小紫',
        mobaile: '17819871456',
        sex: '男'
      },{
        username: '小紫',
        mobaile: '17819871456',
        sex: '男'
      },{
        username: '小紫',
        mobaile: '17819871456',
        sex: '男'
      },{
        username: '小紫',
        mobaile: '17819871456',
        sex: '男'
      },{
        username: '小紫',
        mobaile: '17819871456',
        sex: '男'
      },{
        username: '小紫',
        mobaile: '17819871456',
        sex: '男'
      }]
    }
  },
  methods: {
    handleSizeChange(val){
      this.pagesize=val;
      this.getlist()
    },
    handleCurrentChange(val){
      this.pagenum=val;
      this.getlist()
    },
    
    //拿到对应页码的数据
    getlist(){
      this.newlist=this.tableData.slice((this.pagenum-1)*this.pagesize,this.pagesize*this.pagenum)
    }
  },
  created() {
    this.getlist()
  },
}
</script>

<style lang="scss" scoped>

</style>
